<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="formValue.id > 0 ? '编辑商品管理 #' + formValue.id : '添加商品管理'"
      :style="{
        width: dialogWidth,
      }"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="100"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1">
                <n-form-item label="商品标题" path="title">
                  <n-input placeholder="请输入商品标题" v-model:value="formValue.title" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="封面图" path="image">
                  <UploadImage :maxNumber="1" v-model:value="formValue.image" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="所属店铺" path="shopId">
                  <n-select
                    v-model:value="formValue.shopId"
                    :options="dict.getOptionUnRef('cardShopOption')"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="分类" path="categoryId">
                  <n-tree-select
                    placeholder="请选择分类"
                    v-model:value="formValue.categoryId"
                    key-field="id"
                    label-field="name"
                    :options="treeOption"
                    clearable
                    filterable
                    default-expand-all
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="原价" path="originalPrice">
                  <n-input-number
                    placeholder="请输入原价"
                    v-model:value="formValue.originalPrice"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="现价" path="currentPrice">
                  <n-input-number placeholder="请输入现价" v-model:value="formValue.currentPrice" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="折扣" path="discount">
                  <n-input placeholder="请输入折扣" v-model:value="formValue.discount" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="热销" path="isHot">
                  <n-radio-group v-model:value="formValue.isHot" name="isHot">
                    <n-radio-button
                      v-for="isHot in dict.getOptionUnRef('sys_normal_disable')"
                      :key="isHot.value"
                      :value="isHot.value"
                      :label="isHot.label"
                    />
                  </n-radio-group>
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="评分" path="rating">
                  <n-input-number placeholder="请输入评分" v-model:value="formValue.rating" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="评价数" path="reviews">
                  <n-input-number placeholder="请输入评价数" v-model:value="formValue.reviews" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="促销库存" path="promotionCount">
                  <n-input-number
                    placeholder="请输入促销库存"
                    v-model:value="formValue.promotionCount"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="已售数量" path="soldCount">
                  <n-input-number
                    placeholder="请输入已售数量"
                    v-model:value="formValue.soldCount"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="会员返现" path="memberCashback">
                  <n-input-number
                    placeholder="请输入会员返现"
                    v-model:value="formValue.memberCashback"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="推荐佣金" path="referralCommission">
                  <n-input-number
                    placeholder="请输入推荐佣金"
                    v-model:value="formValue.referralCommission"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="有效期" path="validityPeriod">
                  <n-input placeholder="请输入有效期" v-model:value="formValue.validityPeriod" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="退款政策" path="refundPolicy">
                  <Editor
                    style="height: 450px"
                    id="refundPolicy"
                    v-model:value="formValue.refundPolicy"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="使用规则" path="usageRules">
                  <Editor
                    style="height: 450px"
                    id="usageRules"
                    v-model:value="formValue.usageRules"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="商品描述" path="description">
                  <Editor
                    style="height: 450px"
                    id="description"
                    v-model:value="formValue.description"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm"> 取消 </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useDictStore } from '@/store/modules/dict';
import { Edit, View } from '@/api/cardProduct';
import { State, newState, rules, loadTreeOption, treeOption } from './model';
import UploadImage from '@/components/Upload/uploadImage.vue';
import Editor from '@/components/Editor/editor.vue';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { useMessage } from 'naive-ui';
import { adaModalWidth } from '@/utils/hotgo';

const emit = defineEmits(['reloadTable']);
const message = useMessage();
const settingStore = useProjectSettingStore();
const dict = useDictStore();
const loading = ref(false);
const showModal = ref(false);
const formValue = ref<State>(newState(null));
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const dialogWidth = computed(() => {
  return adaModalWidth(840);
});

// 提交表单
function confirmForm(e) {
  e.preventDefault();
  formRef.value.validate((errors) => {
    if (!errors) {
      formBtnLoading.value = true;
      Edit(formValue.value)
        .then((_res) => {
          message.success('操作成功');
          closeForm();
          emit('reloadTable');
        })
        .finally(() => {
          formBtnLoading.value = false;
        });
    } else {
      message.error('请填写完整信息');
    }
  });
}

// 关闭表单
function closeForm() {
  showModal.value = false;
  loading.value = false;
}

// 打开模态框
function openModal(state: State) {
  showModal.value = true;
  loadTreeOption();
  // 新增
  if (!state || state.id < 1) {
    formValue.value = newState(state);

    return;
  }

  // 编辑
  loading.value = true;
  View({ id: state.id })
    .then((res) => {
      formValue.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

defineExpose({
  openModal,
});
</script>

<style lang="less"></style>